import React, { useEffect, useState } from "react";
import { Switch, Input, message } from "antd";
import { api } from "../../api/index.ts";

import menu_search from "@/assets/images/menu_search.png";
import close from "@/assets/images/close.png";
import gq from "@/assets/images/gq.png";
import gq_selected from "@/assets/images/gq_selected.png";
import add_work_menu_icon from "@/assets/images/add_work_menu_icon.png";
import "./index.less";
type IntriProps = {
  onChangeIsShow: (childData: any) => void;
  subId: string;
};

const AddWorkMenu: React.FC<IntriProps> = ({ onChangeIsShow, subId }) => {
  const [menuList, setMenuList] = useState<any[]>([]);
  useEffect(() => {
    getMenuList(subId);
  }, []);

  const getMenuList = async (id: string) => {
    await api.commonModuleAll(id).then(res => {
      setMenuList([...res.data]);
    });
  };
  // 菜单点击
  function handleMenu(index: number) {
    const updatedMenuList = menuList.map((item, ind) => {
      if (index === ind) {
        return {
          ...item,
          isCommon: !item.isCommon
        };
      }
      return item;
    });
    const params = { moduleId: updatedMenuList[index].id, systemId: subId };
    if (updatedMenuList[index].isCommon) {
      api.addCommonModule(params).then((res: any) => {
        if (res.code === 200) {
          message.success("设置成功");
        }
      });
    } else {
      api.delCommonModule(params).then((res: any) => {
        if (res.code === 200) {
          message.success("设置成功");
        }
      });
    }
    getMenuList(subId);
  }

  function onChange() {
    console.log(123);
  }
  function changeIsShow() {
    onChangeIsShow(false);
  }
  const Suffix = () => {
    return (
      <div className="suffix">
        ｜<img src={menu_search} alt="" />
      </div>
    );
  };

  return (
    <div className="model">
      <div className="add-work-area">
        <div className="add-title">
          <div>
            <img src={add_work_menu_icon} alt="" className="add-img" />
            添加工作区
          </div>
          <div>
            允许系统智能推荐 <Switch defaultChecked onChange={onChange} />
          </div>
          <img src={close} alt="" className="close" onClick={changeIsShow} />
        </div>
        <div className="work-area-content">
          <div className="search-input">
            <Input placeholder="功能模块名称" suffix={Suffix()} />
          </div>
          <div className="work-menu">
            {menuList.map((item, index) => (
              <div
                key={item.id}
                onClick={() => handleMenu(index)}
                className={`work-area-item ${item.isCommon ? "work-area-item-has" : "work-area-item-can"}`}
              >
                <img src={item.isCommon ? gq : gq_selected} alt="logo" className="menu-img" />
                <div className="menu-name">{item.fullName}</div>
                <div className="menu-name">{item.isCommon}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddWorkMenu;
